import React, { Component } from 'react';
import {
	observer,
	inject,
} from 'mobx-react';
import { List, Button, Tools } from 'weaver-mobile';
import { Form } from 'weaver-mobile-page';
import {
  withRouter,
} from 'react-router-dom';
import "../../style/groupAdvice.less";
const getLabel = Tools.getLabel;

@inject('groupStore')
@inject('groupAdviceStore')
@withRouter
@observer
export default class Advice extends Component {
	componentWillMount() {
		const {
			location,
			groupAdviceStore
		} = this.props;

		if (location && location.search) {
			const {
				targetId
			} = this.props.groupStore.splitUrl(location.search);

			groupAdviceStore.setGroupId(targetId);
		}
	}

	componentDidMount() {
		document.title = getLabel(126253, "公共组调整建议");
		this.props.groupAdviceStore.getForm();
	}

	getFields = () => {
		const {groupAdviceStore:store} = this.props
	    const {form} = store;
	    const { conditioninfo, isInit } = form;
	    const fields = [];
	    if (isInit) {
	      conditioninfo.forEach((group) => {
	        group.items.forEach((field) => {
	          const key = field.domkey.join('__');

	          fields.push(<Form.Item
	            key={key}
	            form={form}
	            fieldConfig={field}
	            onChange={form.onChange}
	          />);
	        });
	      });
	    }
	    return fields;
  }


	render() {
		const {
			groupAdviceStore
		} = this.props, {
			save
		} = groupAdviceStore;

		return (
			<div className="group-advice">
				<div>
					 <Form style={{ height: '100%' }} >
				        <List>
				          {this.getFields()}
				        </List>
				      </Form>
				</div>
			      <div>
			     	 <Button type="primary" onClick={save}>{ getLabel(615, "保存") }</Button>
			      </div>
			</div>
		);
	}
}